<template>
	<view class="detail">
		<view class="fixbg" :style="{'background-image': 'url('+songsDetail.al.picUrl+')'}"></view>
		<musichead :title="songsDetail.name" :icon="true" color="white"></musichead>
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true" >
				<view class="detail-play" @tap="handleToPlay">
					<image :src="songsDetail.al.picUrl" mode="" :class="{'detail-play-run': isPlayRotate}"></image>
					<text class="iconfont " :class="iconPlay"></text>
					<view class=""></view>
				</view>
				<view class="detail-lyric">
					<view class="detail-lyric-wrap" :style="{transform:' translateY('+ - (lyricIndex - 1) * 82 + 'rpx)'}">
						<view class="detail-lyric-item" :class="lyricIndex == index ? 'active' : '' " v-for="(item,index) in songLyric" :key="index">
							{{item.lyric}}
						</view>
					</view>
				</view>
				<view class="detail-like">
					<view class="detail-like-head">
						喜欢这首歌的人也听
					</view>
					<view class="detail-like-item" v-for="(item,index) in songSimi" :key="index" @tap=
					"handelToSimi(item.id)">
						<view class="detail-like-img">
							<image :src="item.album.picUrl" mode=""></image>
						</view>
						<view class="detail-like-song">
							<view class="">{{item.name}}</view>
						   <view class="">
						   	    <image src="../../static/hot.png" mode="" v-if="item.privilege.flag > 60 && item.privilege.flag < 70"></image>
								<image src="../../static/sq.png" mode="" v-if="item.privilege.maxbr >= 999000"></image>
								{{item.artists[0].name}} - {{item.name}}
						   </view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
				<view class="detail-comment">
					<view class="detail-comment-head">
						精彩评论
					</view>
					<view class="detail-comment-item" v-for="(item,index) in hotComments" :key="index">
						<view class="detail-comment-img">
							<image :src="item.user.avatarUrl" mode=""></image>
						</view>
						<view class="detail-comment-content">
							<view class="detail-comment-title">
								<view class="detail-comment-name">
									<view class="">{{item.user.nickname}}</view>
									<view class="">{{item.time | formatTime}}</view>
								</view>
								<view class="detail-comment-like">
									{{item.likedCount | formatCount}}
									<text class="iconfont icon-dianzan"></text>
								</view>
							</view>
							<view class="detail-comment-text">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import musichead from '../../components/musichead/musichead.vue'
	import {songUrl,songComment,songLyric,songSimi,songDetail} from '../../common/api.js'
	export default {
		data() {
			return {
				songsDetail:{
					al:{
						picUrl:''
					}
				},
				songSimi:[],
				hotComments:[],
				songLyric:[],
				lyricIndex : 0,
				iconPlay:'icon-zanting',
				isPlayRotate:true,
				isLoading:true
			}
		},
		components:{musichead},
		onLoad(songId) {
			console.log(songId,'songId')
			this.getMusic(songId.id)
		},
		onUnload() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioManager.destroy();
			// #endif
		},
		onHide() {
			this.cancelLyricIndex();
			// #ifdef H5
			this.bgAudioManager.destroy();
			// #endif
		},
		methods: {
			getMusic(songId){
				this.$store.commit('NEXT_ID',songId);
				uni.showLoading({
					title:'加载中...'
				})
				this.isLoading = true;
				Promise.all([songDetail(songId),songSimi(songId),songComment(songId),songLyric(songId),songUrl(songId)]).then(res => {
					console.log(res,'reee')
					this.songsDetail = res[0].data.songs[0];
					this.songSimi = res[1].data.songs;
					this.hotComments = res[2].data.hotComments;
					
					//歌词
					let lyric = res[3].data.lrc.lyric;
					let reg = /\[([^\]]+)\]([^\[]+)/g;
					let result = [];
					lyric.replace(reg,($0,$1,$2) => {
						result.push({
							"time": this.formatTimeToSec($1),
							"lyric":$2
						})
					})
					// console.log(result,lyric.match(reg));
					this.songLyric = result;
					
					// #ifdef MP-WEIXIN
						// 播放 - 小程序
						this.bgAudioManager = uni.getBackgroundAudioManager();
						this.bgAudioManager.title = this.songsDetail.name;
					// #endif
					
					// #ifdef H5
					    if(!this.bgAudioManager){
							this.bgAudioManager = uni.createInnerAudioContext();
						}
						this.iconPlay = 'icon-bofang';
						this.isPlayRotate = false;
					// #endif

					this.bgAudioManager.src = res[4].data.data[0].url || '';
					this.listenLyricIndex();
					this.bgAudioManager.onPlay(() => {
						this.iconPlay = 'icon-zanting';
						this.isPlayRotate = true;
						this.listenLyricIndex();
					})
					this.bgAudioManager.onPause(() => {
						this.iconPlay = 'icon-bofang';
						this.isPlayRotate = false;
						this.cancelLyricIndex();
					})
					
					this.bgAudioManager.onEnded(()=>{
						this.getMusic(this.$store.state.nextId);
					});
					this.isLoading = false;
					uni.hideLoading();
				})
			},
			formatTimeToSec(value){
				let arr = value.split(":")
				return (Number(arr[0]*60) + Number(arr[1])).toFixed(1)
			},
			handleToPlay(){
				if(this.bgAudioManager.paused){
					console.log(55)
					this.bgAudioManager.play();
				}else{
					this.bgAudioManager.pause();
				}
			},
			// 监听歌词滚动
			listenLyricIndex(){
				clearInterval(this.timer)
				this.timer = setInterval(()=>{
					for(let i=0;i<this.songLyric.length;i++){
						if(this.bgAudioManager.currentTime > this.songLyric[this.songLyric.length - 1]){
							this.lyricIndex = this.songLyric.length - 1
							break;
						}
						if(this.bgAudioManager.currentTime > this.songLyric[i].time && this.bgAudioManager.currentTime
						< this.songLyric[i+1].time){
							this.lyricIndex = i;
						}
					}
				},500)
			},
			cancelLyricIndex(){
				clearInterval(this.timer)
			},
			handelToSimi(id){
				this.getMusic(id)
			}
		}
	}
</script>

<style scoped>
.detail-play {
	width: 580rpx;
	height: 580rpx;
	background: url(../../static/juan.png);
	background-size: cover;
	margin: 214rpx auto 0 auto;
	position: relative;
}
.detail-play image {
	width: 370rpx;
	height: 370rpx;
	border-radius: 50%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	animation: 10s linear move infinite;
	animation-play-state: paused;
}
.detail-play .detail-play-run{
	animation-play-state: running;
}
@keyframes  move{
	from{transform: rotate(0deg);}
	to{transform: rotate(360deg);}
}
.detail-play text {
	width: 100rpx;
	height: 100rpx;
	font-size: 100rpx;
	color: white;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}
.detail-play view {
	width: 230rpx;
	height: 360rpx;
	background: url(../../static/needle-ab.png);
	position: absolute;
	left: 100rpx;
	right: 0;
	top: -220rpx;
	margin: auto;
	background-size: cover;
}

.detail-lyric {
	font-size: 32rpx;
	line-height: 85rpx;
	height: 246rpx;
	text-align: center;
	overflow: hidden;
	color: #808080;
}
.detail-lyric-wrap{
	transition: .3s;
}
.detail-lyric-item {
	height: 82rpx;
}
.active{
	color: white;
}

.detail-like {
	margin: 0 30rpx;
}
.detail-like-head {
	font-size: 36rpx;
	color: white;
	margin: 50rpx 0;
}
.detail-like-item {
	display: flex;
	align-items: center;
	margin-bottom: 28rpx;
}
.detail-like-img {
	width: 82rpx;
	height: 82rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.detail-like-img image{
	width: 100%;
	height: 100%;
}
.detail-like-song {
	flex: 1;
	color: #c6c2bf;
}
.detail-like-song view:nth-child(1){
	font-size: 28rpx;
	color: white;
	margin-bottom: 12rpx;
}
.detail-like-song view:nth-child(2){
	font-size: 22rpx;
}
.detail-like-song image{
	width: 26rpx;
	height: 20rpx;
	margin-right: 10rpx;
}
.detail-like-item text{
	font-size: 50rpx;
	color: #c6c2bf;
}

.detail-comment {
	margin: 0 30rpx;
}
.detail-comment-head {
	font-size: 36rpx;
	color: white;
	margin: 50rpx 0;
}
.detail-comment-item {
	margin-bottom: 28rpx;
	display: flex;
}
.detail-comment-img {
	width: 64rpx;
	height: 64rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 18rpx;
}
.detail-comment-img image {
	width: 100%;
	height: 100%;
}
.detail-comment-content {
	flex: 1;
	color: #cbcacf;
}
.detail-comment-title {
	display: flex;
	justify-content: space-between;
}
.detail-comment-name {}
.detail-comment-name view:nth-child(1){
	font-size: 26rpx;
}
.detail-comment-name view:nth-child(2){
	font-size: 26rpx;
}
.detail-comment-like {
	font-size: 28rpx;
}
.detail-comment-text {
	font-size: 28rpx;
	line-height: 40rpx;
	color: white;
	animation-play-state: rpx;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 40rpx;
}
</style>
